<!DOCTYPE html>
<html>
<head>
    <meta charset='utf-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <title>Page Title</title>
    <meta name='viewport' content='width=device-width, initial-scale=1'>
    <style>
        div{
            /* 在div中写入padding值时  不改变div原有的高度 */
            -webkit-box-sizing: border-box;
                -moz-box-sizing: border-box;
                box-sizing: border-box;
        }
        .clearfix:after{
            /* 清除浮动 */
            display:block;
            content:'';
            clear:both;
        }
        .container{
            min-height:500px;
            padding:20px;
            background-color:#eee;
            position:relative;
        }
        .container,.left,.content,.right{
            border:1px solid #999;
        }
        .left{
            width:200px;
            background:#fff;
            padding:20px;
            position:absolute;
            left:20px;
            top:20px;
        }
        .left img{
            width:80px;
            height:80px;
            float:left;
        }
        .left h2{
            font-size:16px;
            float:left;
            margin-left:10px;
        }
        .center{
            margin:0 120px 0 200px;
            padding:0 20px;
        }
        .content{
            word-wrap:break-word;
            line-height:25px;
            font-size:20px;
            letter-spacing:2px;
        }
        .right{
            width:120px;
            background-color:#fff;
            position:absolute;
            right:20px;
            top:20px;
            padding:20px;
        }
        .right li{
            list-style:none;
            width:80px;
            padding-top:20px;
            float:left;
        }
        .right li:first-child{
            padding:0;
        }
        .right img{
            width:100%;
            height:100%;
        }
    </style>
    <style type="text/css">
        canvas { border: 1px solid #cccccc; }
        .container {
            max-width: 980px;
        }
    </style>
    <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
    <script src="./sort.js"></script>
</head>
<body>
    <div id="container">
        <canvas id="bubbleSort" width="1000" height="100"></canvas>
        <hr/>
        <canvas id="selectionSort" width="1000" height="100"></canvas>
    </div>
    
    <script>
        var canvasSort = new CanvasSort();
        var arr = [8, 50, 48, 20, 25, 9, 36, 3];
        var instanceBuble = canvasSort.handleInitSort([3, 50, 48, 20, 25, 9, 36, 8], 'bubble');
        //canvasSort.handleStartBubbleSort(instanceBuble,'bubble', [3, 50, 48, 20, 25, 9, 36, 8], 0);

        var instanceSelection = canvasSort.handleInitSort([8, 50, 48, 20, 25, 9, 36, 3], 'selection');
        canvasSort.handleStartSelectionSort(instanceSelection,'selection', [8, 50, 48, 20, 25, 9, 36, 3], 0);
    </script>
</body>
</html>